import TitleBar from "@/components/TitleBar/TitleBar";
import { useNavigate } from "react-router-dom";

const Login = () => {
    const navigate = useNavigate();
    const checkLogin = () => {
        navigate("/chat", { replace: true })
    }


    return <div className="w-full h-full overflow-auto flex flex-col">
        <TitleBar title="登录" isShowBack={true} />
        <div className="flex-1 overflow-auto bg-[#ECECEC] box-border p-[10px]">
            <div className="bg-white rounded-[10px] box-border p-[10px] flex flex-col gap-[8px]">
                <div>
                    <div>用户名</div>
                    <div className=" border-b border-solid border-gray-300">
                        <input type="text" className="w-full h-[35px] outline-0" />
                    </div>
                </div>
                <div>
                    <div>密码</div>
                    <div className=" border-b border-solid border-gray-300">
                        <input type="password" className="w-full h-[35px] outline-0" />
                    </div>
                </div>
                <div className="flex flex-row items-center gap-[4px]">
                    <input type="checkbox" />
                    <span className="text-[12px] text-gray-500">记住密码</span>
                </div>
                <button onClick={checkLogin} type="button" className="my-[5px] bg-primary-color text-white h-[36px] rounded-[20px]">登录</button>
                <div className="text-[12px] flex flex-row justify-center">
                    还没有账号，去<span className="text-primary-color underline">注册</span>
                </div>
            </div>
        </div>
    </div>
}

export default Login;